<template>


<div>
  <div class="con" style="margin:0 auto;width:30%;margin-top: 10%" >
        <p style="text-align: center;font-weight:bold;font-size: 20px">密码修改</p>
        <div style="margin-bottom: 10px ;">
          账户:  <el-tag>{{ account }}</el-tag>
        </div>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" >
          <el-form-item label="密码" required prop="password" >
            <el-input type="password" v-model="ruleForm.password" ></el-input>
          </el-form-item>
          <el-form-item label="确认密码" required prop="checkPassword">
            <el-input type="password" v-model="ruleForm.checkPassword"></el-input>
          </el-form-item>
          <div style="float: right">
            <el-button type="primary" @click="submitForm('ruleForm')">确认</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </div>
        </el-form>
  </div>
</div>

</template>

<script>
export default {
  name: "changePasword",
  data(){
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPassword');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.ruleForm.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return{
      account: '',
      time:'',
      ruleForm:{
        password:'',
        checkPassword:''
      },
      rules:{
        password: [
          { validator: validatePass, trigger: 'blur' }
        ],
        checkPassword: [
          { validator: validatePass2, trigger: 'blur' }
        ],
      },

    }
  },

  created() {
    this.ensureUser()
  },
  methods:{
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          const confirmResult =await this.$confirm('密码信息将从数据库中更新，是否继续？','提示',{
            confirmButtonText:'确定',
            cancelButtonText:'取消',
            type:'warning'
          }).catch(err=>err)
          if(confirmResult!='confirm'){
            return this.$message.info("已取消");
          }
          const {data:res} = await this.$http.delete("/changePassword",{
            params:{
              password:this.ruleForm.password,
              account:this.account,
              time:this.time,
            }
          });
          if(res!='success'){
            return this.$message.error(res)

          }else {
            this.$router.push("Index")
            return this.$message.success("修改成功！")
          }


        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    async ensureUser() {
      var query = this.$route.query;
      let time = query.time;
      const {data: res} = await this.$http.get("ensureUser", {
        params: {
          time: time
        }
      })
      if(res.flag=='success'){
        this.account=res.account;
      }else {
        this.$router.push("Index")
      }
    }
  }

}
</script>

<style scoped>
.con{
  margin: 10px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  overflow: hidden;
}


</style>